<template>
  <div class="page page-with-subnavbar">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">返回</span>
          </a>
        </div>
        <div class="title">公文中心</div>
        <div class="subnavbar">
          <!-- Searchbar inside of Subnavbar -->
          <form class="searchbar doccenter-lists-serchbar">
            <div class="searchbar-inner">
              <div class="searchbar-input-wrap">
                <input type="search" placeholder="搜索关键字">
                <i class="searchbar-icon"></i>
                <span class="input-clear-button"></span>
                <b class="doccenter-lists-filter-button">筛选</b>
              </div>
              <span class="searchbar-disable-button">Cancel</span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="page-content">


      <div class="list media-list doccenter-lists">
        <ul>

        </ul>
      </div>


    </div>
  </div>


</template>
<style>
  .doccenter-lists-serchbar input {
    padding-right: 70px; }
  .doccenter-lists-serchbar .input-clear-button {
    right: 55px !important; }
  .doccenter-lists-serchbar .doccenter-lists-filter-button {
    position: absolute;
    right: 0;
    z-index: 40;
    top: 50%;
    height: 28px;
    line-height: 28px;
    margin-top: -14px;
    padding-right: 18px;
    color: #666;
    font-weight: normal;
    font-size: 14px;
    background: url("./imgs/filter.png") no-repeat 90% center;
    background-size: 14px; }

  .doccenter-lists {
    margin-top: 10px !important; }
  .doccenter-lists ul .processType {
    float: right;
    margin-right: 10px;
    color: #db2d2d;
    vertical-align: middle; }

  .doccenter-lists-popup {
    left: inherit;
    width: 70%;
    right: 0; }
  .doccenter-lists-popup .popup-footer {
    width: 100%;
    position: absolute;
    bottom: 0 !important; }
  .doccenter-lists-popup .popup-footer .segmented {
    margin: 0;
    display: block;
    overflow: auto; }
  .doccenter-lists-popup .popup-footer .segmented .button {
    float: left;
    width: 50%;
    border-radius: 0;
    height: 44px;
    line-height: 44px;
    background-color: #f0f0f0;
    color: #333;
    border-color: transparent; }
  .doccenter-lists-popup .popup-footer .segmented .button-active {
    color: #fff;
    background-color: #db2d2d;
    border-color: #db2d2d; }

  .doccenter-lists-date-picker {
    display: none;
    margin-top: 30px; }
  .doccenter-lists-date-picker .item-input-wrap > input:nth-child(1) {
    margin-bottom: 20px; }

  #doccenter-lists-form {
    margin-top: 5px; }
  #doccenter-lists-form > ul:before {
    display: none;
    content: none; }
  #doccenter-lists-form > ul .item-label {
    color: #db2d2d;
    font-size: 14px;
    border-left: 3px solid #db2d2d;
    padding-left: 5px; }
  #doccenter-lists-form > ul .block {
    padding: 0; }
  #doccenter-lists-form > ul .block .button-fill {
    background-color: #ccc;
    color: #333; }
  #doccenter-lists-form > ul .block .button-fill.active {
    color: #fff;
    background-color: #db2d2d; }
</style>
<script>
  return {
    // Lifecycle Hooks
    beforeCreate() {
      console.log('componentBeforeCreate', this);
    },
    created() {
      console.log('componentCreated', this);
    },
    beforeMount() {
      console.log('componentBeforeMount', this);
    },
    mounted() {
      console.log('componentMounted', this);
      console.log('组件转载完成，拿全局变量中的用户信息去查询后台', this.$root.user);
      app.preloader.show();//打开加载器
      setTimeout(function () {
        this.lists =  [
          {id:1001,title:'公文中心模拟数据标题1公文中心模拟数据标题1公文中心模拟数据标题1',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listdefault.png'},
          {id:1002,title:'公文中心模拟数据标题2公文中心模拟数据标题2公文中心模拟数据标题2',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'},
          {id:1003,title:'公文中心模拟数据标题3公文中心模拟数据标题3公文中心模拟数据标题3',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'}
        ];
        this.updataDoccenterListsView();
        app.preloader.hide();//获取数据成功 更新视图 关闭加载器
      }.bind(this),1000)
    },
    beforeDestroy() {
      console.log('componentBeforeDestroy', this);

    },
    destroyed() {
      console.log('componentDestroyed', this);
    },
    // Component Data
    data: function () {
      // Must return an object
      return {
        lists: [
        ]
        ,
        sercherDate: {
          title: '',
          createPeople: '',
          processType: '',
          datePick: ''
        }
      }
    },
    // Component Methods
    methods: {
      dataPickerClick: function (e) {
        $$('.doccenter-lists-popup .doccenter-lists-data-picker-btns').find('.button').removeClass('active');
        $$(e.target).addClass('active');
        console.log($$(e.target).attr('data-date-type')) // 根据点击不同的btn来设置 serchDate
        if ($$(e.target).attr('data-date-type') === 'zdy') { // 切换显示自定义picker
          $$('.doccenter-lists-popup .doccenter-lists-date-picker').show();
        } else {
          $$('.doccenter-lists-popup .doccenter-lists-date-picker').hide();
        }
      },
      filterButtonClick: function (e) {
        console.log('btn click')
        app.popup.open('.doccenter-lists-popup');
      },
      updataDoccenterListsView:function () {
        var str = '';
        for (var i = 0; i < this.lists.length; i++) {
          str += `
          <li data-list-id="${this.lists[i].id}">
            <a href="/doccenter-list-details-component/${this.lists[i].id}/${this.lists[i].title}" class="item-link item-content">
              <div class="item-media"><img src=${this.lists[i].imgsrc} width="60"/></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">${this.lists[i].title} </div>
                </div>
                <div class="item-subtitle">${this.lists[i].subtitle}</div>
              </div>
            </a>
          </li>
              `
        }
        $$('.doccenter-lists ul').html(str);
      }
    },
    // Page Events
    on: {
      pageMounted: function (e, page) {
        console.log('pageMounted', page);
      },
      pageInit: function (e, page) {
        console.log('pageInit', page);
      },
      pageBeforeIn: function (e, page) {
        console.log('pageBeforeIn', page);
      },
      pageAfterIn: function (e, page) {
        console.log('pageAfterIn', page);
        $$('.doccenter-lists-filter-button').on('click', this.filterButtonClick);
        $$('.doccenter-lists-data-picker-btns').on('click', '.button', this.dataPickerClick);


      },
      pageBeforeOut: function (e, page) {
        console.log('pageBeforeOut', page);
        $$('.doccenter-lists-filter-button').off('click', this.filterButtonClick);
        $$('.doccenter-lists-data-picker-btns').on('click', '.button', this.dataPickerClick);

      },
      pageAfterOut: function (e, page) {
        console.log('pageAfterOut', page);
      },
      pageBeforeRemove: function (e, page) {
        console.log('pageBeforeRemove', page);
      },
    }
  };

</script>
